<template>
    <el-row class="file_controler" style="margin-top: 20px; height: 25px;">

        <!-- <el-col :span="1"></el-col> -->
        <el-col>
            <span style="font-size: small; margin-left: 20px; float: left;" v-if="!data.showbtns">
                <el-icon>
                    <InfoFilled />
                </el-icon> 共享中的文件列表(在此处您可以管理文件分享状态，查看或移除分享)
            </span>
            <el-button type="primary" plain round v-else-if="data.showbtns">
                <el-icon><Remove /></el-icon> 取消分享
            </el-button>
        </el-col>

    </el-row>
    <el-row>
        <el-col :span="14">
            <h3 style="text-align: left; margin: 35px 0 25px 10px;">
                <el-icon>
                    <Files />
                </el-icon> 全部文稿
                <el-button type="primary" text>
                    <el-icon>
                        <Refresh />
                    </el-icon> 刷新
                </el-button>

            </h3>
        </el-col>
        <el-col :span="10">
            <!-- <label style="margin: 45px 0px 25px 10px; font-size: small; vertical-align: bottom;">已加载全部，共{{ tableData1.length }}个</label> -->
            <div class="text">
                <el-text size="small">已加载全部，共{{ tableData1.length }}个</el-text>
            </div>
        </el-col>
    </el-row>
    <div>
        <el-table :data="tableData1" row-key="id" style="width: 100%" @selection-change="handleSelectionChange"
            empty-text="--">
            <el-table-column type="selection" width="30" />
            <el-table-column label="" width="25">
                <template #default="scope"></template>
            </el-table-column>
            <el-table-column label="共享文件名">
                <template #default="scope">
                    <el-link :underline="false">
                        <div style="display: flex; align-items: center">
                            <img src="../../assets/images/folder.png" v-if="scope.row.filetype == '文件夹'" />
                            <img src="../../assets/images/txt.png" v-else-if="scope.row.filetype == 'txt文本文件'" />
                            <img src="../../assets/images/unknown.png" v-else />
                        </div>&nbsp;&nbsp;{{ scope.row.filename }}
                    </el-link>
                </template>
            </el-table-column>
            <el-table-column prop="sharetime" label="共享时间" sortable />
            <el-table-column prop="filetype" label="类型" sortable />
            <el-table-column label="状态">
                <template #default="scope">
                    <el-text type="info" v-if="scope.row.remainderday != 0">{{ scope.row.remainderday }}天后过期</el-text>
                    <el-text type="info" v-else>已失效</el-text>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作">
                <template #default="scope">
                    <el-button type="danger" plain @click.stop="openDeleteConf(scope.$index, scope.row)">
                        <strong>
                            <el-icon>
                                <DeleteFilled />
                            </el-icon> 删除</strong>
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script lang="ts" setup>
import { computed, ref, reactive } from 'vue'
import { ElCol, ElMessage, ElMessageBox } from 'element-plus'

const data = reactive({
    showbtns: false
})

const openDeleteConf = (index, row) => {
    ElMessageBox.confirm(
        '此文件/文件夹将会从共享记录中删除。',
        '确认删除？',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
            center: true,
            draggable: true
        }
    ).then(() => {
        ElMessage({
            type: 'success',
            message: '删除成功！',
        }),
            handleDelete(index, row)
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '已取消删除',
        })
    })
}


interface FileData {
    id: number
    filename: string
    sharetime: string
    filetype: string
    remainderday: number
}

const handleEdit = (index, row) => {
    console.log(index, row);
}
const handleDelete = (index, row) => {
    console.log(index, row);
}
const handleRename = (index, row) => {
    console.log(index, row);
}

const handleSelectionChange = (selection) => {
    if (selection.length != 0) {
        data.showbtns = true;

    } else {
        data.showbtns = false;
    }
    console.log(selection);

}



const tableData1: FileData[] = [
    {
        id: 1,
        filename: '典型稿件',
        sharetime: '2023.12.13 16:00',
        filetype: '文件夹',
        remainderday: 3
    },
    {
        id: 2,
        filename: 'ts_共享历史.txt',
        sharetime: '2023-12-20 10:00',
        filetype: 'txt文本文件',
        remainderday: 3
    },
    {
        id: 3,
        filename: 'ts_共享历史01.txt',
        sharetime: '2023.12.20 21:00',
        filetype: 'txt文本文件',
        remainderday: 3
    },
    {
        id: 4,
        filename: 'ts_共享历史03.log',
        sharetime: '2023.11.13 16:00',
        filetype: '日志文件',
        remainderday: 3
    },
]
// console.log(tableData1)
</script>
  

<style scoped>
.el-col div.text {
    margin: 55px 20px 0px auto;
    text-align: right;
}

.cell .el-button {
    width: auto;
    margin: 0 10px 0 0;
    padding: 0;
}

.file_controler .el-col {
    text-align: left;
}
</style>